<template>
    <div id="safety-cockpit" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;">

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <div class="w-h-100" style="width: 100%">
                                        <el-row :gutter="8" class="e-row">
                                            <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7" class="mb20">
                                                <v-left :totalData="totalData" />
                                            </el-col>
                                            <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10" class="mb20">
                                                <v-center :totalData="totalData" />
                                            </el-col>
                                            <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7" class="mb20">
                                                <v-right
                                                    :isAgain="isAgain"
                                                    :totalData="totalData" 
                                                    @searchData="searchData"
                                                />
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>

        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted, reactive , toRaw } from 'vue';
import VLeft from './components/v-left.vue';
import VCenter from './components/v-center.vue';
import VRight from './components/v-right.vue';
import { ControlBoard } from '/@/api/sms/sms';
export default defineComponent( {
    name:'safety-cockpit',
    components: {
        VLeft,
        VCenter,
        VRight,
    },
    setup(props){
        const totalData = ref();
        const isAgain = ref();
        // 获取驾驶舱数据
        const getData = async(arr: array = []) => {
            let param: any = {};
            if(arr.length !== 0){
                param.startDate = arr[0];
                param.endDate = arr[1];
            }else{
                param.startDate = '';
                param.endDate = '';
            }
            try {
                let res:any = await ControlBoard(param);
                console.log(res.data,'res.data')
                if(res.success) totalData.value = res.data;
            } catch (err) { 
                console.log(err,'错误信息')
            }
        };
        const searchData = (val: any) => {
            isAgain.value = false;
            getData(val);
        };
        const clearFun = () => {
            isAgain.value = true;
        };
        onMounted(() => {
            getData([]);
        });
        return {
            totalData,
            searchData,
            isAgain,
            clearFun,
        }
    },
    beforeRouteLeave(to, from, next) {
        // 在离开路由前执行的逻辑
        this.clearFun();
        next();
    },
})
</script>
<style lang="scss" scoped>
#safety-cockpit{
    width: 100%;
    box-sizing: border-box;
    :deep(.el-card__body) {
        height: 100%;
        padding: 0px!important;
    }
    :deep(.el-card){
        border: none !important;
        background:none!important;
        border-radius: 0px!important;
    }
    .e-row{
        height: 100%;
        width: 100%;
        .mb20{
            height: 100%;
            margin-bottom: 0!important;
            overflow: hidden;
        }
    }
}
</style>